<template>
  <div id="order">
    <van-tabs
      class="tabs"
      v-model="active"
      background="#545c80"
      color="#f7f8fa"
      title-inactive-color="#f7f8fa"
      title-active-color="#f7f8fa"
      sticky
      animated
      swipeable>

      <!-- 购买 -->
      <van-tab title="我的发布">
        <van-list
          v-model="buy.loading"
          :finished="buy.finished"
          finished-text="没有更多了"
          @load="onLoadBuy"
        >
          <van-cell
            v-for="item in buy.list"
            :key="item.id"
            @click="detailBuyer(item)"
          >
            <template #icon>
              <van-image
                class="avatar"
                width="48"
                height="48"
                :src="require('../assets/bx.jpg')"
                lazy-load
              />
            </template>
            <template #title>
              <div class="order-param">金额 <span class="total">{{item.count}}CNY</span></div>
              <div class="order-param">数量 {{item.num}}</div>
            </template>
            <template #default>
              <span>{{item.id}}</span>
            </template>
          </van-cell>
          <template #finished>
            <van-empty v-if="buy.list.length == 0" description="这里什么也没有" />
            <div v-else>没有更多了</div>
          </template>
        </van-list>
      </van-tab>

      <!-- 出售 -->
      <van-tab title="交易中">
        <van-list
          v-model="sell.loading"
          :finished="sell.finished"
          finished-text="没有更多了"
          @load="onLoadSell"
        >
          <van-cell
            v-for="item in sell.list"
            :key="item.id"
            @click="detailSeller(item)"
          >
            <template #icon>
              <van-image
                class="avatar"
                width="48"
                height="48"
                :src="require('../assets/bx.jpg')"
                lazy-load
              />
            </template>
            <template #title>
              <div class="order-param">金额 <span class="total">{{item.count}}CNY</span></div>
              <div class="order-param">数量 {{item.num}}</div>
            </template>
            <template #default>
              <div>{{item.id}}</div>
              <van-tag v-if="item.paymentVoucher != ''" type="success">{{item.sellOrBuy == 0 ? '买家已付款' : '等待发货'}}</van-tag>
              <van-tag v-else type="warning">{{item.sellOrBuy == 0 ? '等待买家付款' : '去付款'}}</van-tag>
            </template>
          </van-cell>
          <template #finished>
            <van-empty v-if="sell.list.length == 0" description="这里什么也没有" />
            <div v-else>没有更多了</div>
          </template>
        </van-list>
      </van-tab>

      <!-- 已完成 -->
      <van-tab title="已完成">
        <van-list
          v-model="finish.loading"
          :finished="finish.finished"
          finished-text="没有更多了"
          @load="onLoadFinish"
        >
          <van-cell
            v-for="item in finish.list"
            :key="item.id"
            @click="detailSeller(item, 'finish')"
          >
            <template #icon>
              <van-image
                class="avatar"
                width="48"
                height="48"
                :src="require('../assets/bx.jpg')"
                lazy-load
              />
            </template>
            <template #title>
              <div class="order-param">金额 <span class="total">{{item.count}}CNY</span></div>
              <div class="order-param">数量 {{item.num}}</div>
            </template>
            <template #default>
              <span>{{item.id}}</span>
            </template>
          </van-cell>
          <template #finished>
            <van-empty v-if="finish.list.length == 0" description="这里什么也没有" />
            <div v-else>没有更多了</div>
          </template>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
  import store from '@/store';
  import axios from 'axios';

  export default {
      name: "Order",
      data() {
        return {
          active: 0,
          buy: {              // 购买
            list: [],         // 订单集合
            loading: false,   // 是否处于加载状态，加载过程中不触发load事件
            finished: false,  // 是否已加载完成，加载完成后不再触发load事件
          },
          sell: {             // 出售
            list: [],         // 订单集合
            loading: false,   // 是否处于加载状态，加载过程中不触发load事件
            finished: false,  // 是否已加载完成，加载完成后不再触发load事件
          },
          finish: {           // 已完成
            list: [],         // 订单集合
            loading: false,   // 是否处于加载状态，加载过程中不触发load事件
            finished: false,  // 是否已加载完成，加载完成后不再触发load事件
          },
          container: null,
          user: JSON.parse(sessionStorage.getItem('user')),
        };
      },
      methods: {
        // 加载购买列表
        onLoadBuy() {
          // 加载中
          this.buy.loading = true;

          axios.get(store.state.api + '/market/getReleaseOrder', {
            params: {
              uid: this.user.uid,
            }
          }).then(res => {
            if (res.data.code == '200') {
              this.buy.list = res.data.data;
              this.buy.finished = true;
            }
            this.buy.loading = false;
          }).catch(error => {
            this.buy.loading = false;
          });
        },

        // 加载出售列表
        onLoadSell() {
          // 加载中
          this.sell.loading = true;

          axios.get(store.state.api + '/market/getTransactionOrder', {
            params: {
              uid: this.user.uid,
            }
          }).then(res => {
            if (res.data.code == '200') {
              this.sell.list = res.data.data;
              this.sell.finished = true;
            }
            this.sell.loading = false;
          }).catch(error => {
            this.sell.loading = false;
          });
        },

        // 加载已完成列表
        onLoadFinish() {
          // 加载中
          this.finish.loading = true;

          axios.get(store.state.api + '/market/getCompleteOrder', {
            params: {
              uid: this.user.uid,
            }
          }).then(res => {
            if (res.data.code == '200') {
              this.finish.list = res.data.data;
              this.finish.finished = true;
            }
            this.finish.loading = false;
          }).catch(error => {
            this.finish.loading = false;
          });
        },

        detailBuyer(order) {
          this.$router.push({name:"orderDetailBuyer", params: order})
        },
        detailSeller(order, finish) {
          if (finish) {
            order['finish'] = true;
          }
          this.$router.push({name: "orderDetailSeller", params: order});
        }
      },
      mounted() {
        this.container = this.$refs.container;
      },
    }
</script>

<style scoped>
  .avatar {
    margin-right: 10px;
  }
  .order-param {
    color: #969799;
    font-size: 14px;
    text-align: left;
  }
  .total {
    text-align: right;
    line-height: 18px;
    color: #545c80;
    /*font-size: 16px;*/
  }
  .tabs {
    margin-bottom: 50px;
  }
</style>
